<template>
    <view class="container">
        <view class="list">
            <view
                class="item bg-fff"
                v-for="(item, index) in list"
                :key="index"
            >
                <view class="item-user flex-align-center">
                    <image
                        :src="item.users.avatarUrl || $setting.avatarUrl()"
                        class="item-user-image"
                    ></image>
                    <view class="item-user-con">
                        <view class="flex-space-between">
                            <view>{{ item.users.nickName }}</view>
                            <view>{{ item.create_time }}</view>
                        </view>
                        <view class="flex-space-between">
                            <view class=""></view>
                            <view class="flex-align-center">
                                <text v-if="item.score == 10">好评</text>
                                <text v-if="item.score == 20">中评</text>
                                <text v-if="item.score == 30">差评</text>
                            </view>
                        </view>
                    </view>
                </view>

                <view class="item-score">
                    <view class="flex-align-center">
                        <view>描述相符：</view>
                        <u-rate
                            :count="5"
                            v-model="item.describe_score"
                            disabled
                        ></u-rate>
                    </view>
                    <view class="flex-align-center">
                        <view>服务态度：</view>
                        <u-rate
                            :count="5"
                            v-model="item.server_score"
                            disabled
                        ></u-rate>
                    </view>
                    <view class="flex-align-center">
                        <view>配送服务：</view>
                        <u-rate
                            :count="5"
                            v-model="item.express_score"
                            disabled
                        ></u-rate>
                    </view>
                </view>

                <view class="item-content">{{ item.content }}</view>
                <view class="item-image flex-wrap" v-if="item.image.length > 0">
                    <view
                        v-for="(it, idx) in item.image"
                        :key="index"
                        @click="handlePreview(item.image)"
                    >
                        <image :src="it.file_path"></image>
                    </view>
                </view>
                <view class="merchantResponse" v-if="item.is_show !== 0">
                    商家回复：
                    <view class="responseContent">{{ item.reply }}</view>
                </view>
            </view>
        </view>

        <view v-if="list.length > 0">
            <b-u-loadmore :status="loadmoreStatus"></b-u-loadmore>
        </view>
        <view v-else style="padding-top: 100rpx">
            <u-empty text="暂无数据" mode="data"></u-empty>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            pageForm: {
                product_id: 0,
                scoreType: -1,
                page: 1,
                list_rows: 20,
            },
            list: [],
            loadmoreStatus: "nomore",
        };
    },
    onLoad(options) {
        this.pageForm.product_id = options.product_id;
        this.getHttp();
    },
    onReachBottom() {
        if (this.loadmoreStatus == "nomore") {
            return;
        }
        this.pageForm.page++;
        this.getComment();
    },
    methods: {
        handlePreview(images) {
            // 预览图片
            uni.previewImage({
                urls: images.map((item) => item.file_path),
            });
        },
        getComment() {
            this.loadmoreStatus = "loading";
            uni.$u.api.getComment(this.pageForm).then((res) => {
                this.list = this.list.concat(res.list.data);
                this.loadmoreStatus = "loadmore";
                if (this.list.length == res.list.total) {
                    this.loadmoreStatus = "nomore";
                }
            });
        },
        getHttp() {
            this.getComment();
        },
    },
};
</script>

<style lang="scss" scoped>
.container {
    padding: 30rpx;

    .list {
        .item {
            border-radius: 16rpx;
            padding: 30rpx;
            margin-bottom: 26rpx;

            .item-user {
                .item-user-image {
                    width: 64rpx;
                    height: 64rpx;
                    border-radius: 50%;
                }

                .item-user-con {
                    flex: 1;
                    font-size: 24rpx;
                    color: #999999;
                    margin-left: 20rpx;
                }
            }

            .item-score {
                margin-top: 26rpx;
                font-size: 22rpx;
                color: #999999;
            }

            .item-content {
                margin-top: 26rpx;
                font-size: 24rpx;
                color: #333333;
            }

            .item-image {
                margin-top: 26rpx;

                image {
                    margin: 0 8rpx 8rpx 0;
                    width: 160rpx;
                    height: 160rpx;
                    border-radius: 16rpx;
                }
            }
        }
    }
}
.merchantResponse {
    padding: 10rpx 20rpx;
    background-color: #d1d1d136;
    font-size: 22rpx;
    color: #999999;
    border-radius: 8rpx;
}
</style>
